<script lang="ts" setup>
import { computed, defineAsyncComponent, reactive, ref, shallowRef } from 'vue';

import { VIcon } from '@croco/framework/icons';
import { Page } from '@croco/framework/libraries';
import { useUserStore } from '@croco/framework/stores';

import AvatarDialog from './avatar.vue';

defineOptions({ name: 'Profile' });

const account = defineAsyncComponent(() => import('#/views/_core/profile/account.vue'));
const password = defineAsyncComponent(() => import('#/views/_core/profile/password.vue'));
const space = defineAsyncComponent(() => import('#/views/_core/profile/space.vue'));
const log = defineAsyncComponent(() => import('#/views/_core/profile/log.vue'));

const userStore = useUserStore();

const comArr: any = shallowRef({
    account,
    password,
    space,
    log,
});

const menu = reactive([
    {
        groupName: '基本设置',
        list: [
            {
                icon: 'el-icon-postcard',
                title: '个人信息',
                component: 'account',
            },
            {
                icon: 'el-icon-lock',
                title: '密码',
                component: 'password',
            },
        ],
    },
    {
        groupName: '数据管理',
        list: [
            // {
            //     icon: 'el-icon-coin',
            //     title: '存储空间信息',
            //     component: 'space',
            // },
            {
                icon: 'el-icon-clock',
                title: '登录日志',
                component: 'log',
            },
        ],
    },
]);

const user = computed(() => userStore.userInfo);
const page = ref('account');
const onOpenPage = (item: any) => {
    page.value = item.index;
};

const avatarVisible = ref(false);
const onOpenAvatar = (v: boolean) => {
    avatarVisible.value = v;
};
</script>

<template>
    <Page auto-content-height>
        <el-container class="page-user" style="height: 100%">
            <el-aside style="border-right: 1px solid var(--el-border-color-light) !important; margin: 15px 0" width="250px">
                <el-header style="height: auto; display: block">
                    <div class="user-info-top">
                        <span class="el-avatar el-avatar--circle" style="--el-avatar-size: 120px; position: relative">
                            <el-avatar :size="120">
                                <VIcon :icon="user.avatar" class="h-full w-full" />
                            </el-avatar>
                            <span class="el-avatar__action" @click="onOpenAvatar(true)">更换</span>
                        </span>
                    </div>
                    <AvatarDialog v-if="avatarVisible" title="更换头像" @closed="onOpenAvatar(false)" />
                </el-header>
                <el-menu :default-active="page" class="menu">
                    <el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
                        <el-menu-item v-for="item in group.list" :key="item.component" :index="item.component" @click="onOpenPage">
                            <VIcon v-if="item.icon" :icon="item.icon" />
                            <template #title>
                                <span>{{ item.title }}</span>
                            </template>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-menu>
            </el-aside>
            <el-main>
                <!--<Suspense> 是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化-->
                <Suspense>
                    <template #default>
                        <div>
                            <component :is="comArr[page]" />
                        </div>
                    </template>
                    <template #fallback>
                        <div>
                            <el-skeleton :rows="3" />
                        </div>
                    </template>
                </Suspense>
            </el-main>
        </el-container>
    </Page>
</template>

<style lang="scss" scoped>
.page-user {
    .el-main > :first-child {
        height: 100%;
    }
    .el-main {
        .el-tab-pane {
            height: 100%;
        }
    }
    .user-info-top {
        display: inline-flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;

        .user-info-name {
            font-size: 25px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 120px;
        }

        .el-avatar:hover {
            .el-avatar__action {
                opacity: 1;
            }
        }

        .el-avatar__action {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: opacity var(--el-transition-duration);
        }
    }
    .menu {
        background: none;
        .el-menu-item {
            --el-menu-item-height: 50px;
            font-size: 14px;
        }

        .el-menu-item-group {
            border-top: 1px solid var(--el-border-color-light);

            &:first-child {
                border: 0;
            }
        }
    }
}
</style>
